import React, {useEffect, useState} from 'react';
import {Avatar, Button, Card, Col, Divider, Row, Space, Tag, Typography} from 'antd';
import {
    BookOutlined,
    CodeOutlined,
    GithubOutlined,
    GlobalOutlined,
    HeartOutlined,
    MailOutlined,
    RocketOutlined,
    TeamOutlined
} from '@ant-design/icons';

const {Title, Paragraph, Text } = Typography;

const About: React.FC = () => {
    const [currentYear, setCurrentYear] = useState<number>(new Date().getFullYear());

    useEffect(() => {
        setCurrentYear(new Date().getFullYear());
    }, []);

    // 团队成员数据
    const teamMembers = [
        {
            name: 'Lin QingYing',
            role: '项目负责人 & 开发者',
            avatar: 'https://joeschmoe.io/api/v1/random',
            github: 'https://github.com/lin-qingying',
            email: 'lin17624294976@outlook.com'
        }
    ];

    // 技术栈数据
    const techStack = [
        {name: 'React', color: '#61dafb', category: '前端'},
        {name: 'TypeScript', color: '#007acc', category: '前端'},
        {name: 'Ant Design', color: '#1890ff', category: '前端'},
        {name: 'Kotlin', color: '#A97BFF', category: '后端'},
        {name: 'Ktor', color: '#F88909', category: '后端'},
        {name: 'MongoDB', color: '#4DB33D', category: '数据库'},
        {name: 'Docker', color: '#2496ED', category: '部署'},
        {name: 'IntelliJ Plugin SDK', color: '#FC801D', category: '插件开发'}
    ];


    return (
        <div className="about-container" style={{maxWidth: '1000px', margin: '0 auto', padding: '20px'}}>
            <Card
                style={{
                    boxShadow: '0 0 20px rgba(0, 0, 0, 0.05)',
                    borderRadius: '8px',
                    padding: '10px'
                }}
            >
                <div style={{textAlign: 'center', marginBottom: '30px'}}>
                    <Title level={2} style={{
                        color: '#2c3e50',
                        borderBottom: '2px solid #eee',
                        paddingBottom: '15px'
                    }}>
                        <RocketOutlined style={{marginRight: '12px'}}/>
                        关于 CangJie Telemetry
                    </Title>
                    <div style={{
                        backgroundColor: '#f5f5f5',
                        padding: '8px 15px',
                        borderRadius: '20px',
                        display: 'inline-block',
                        marginBottom: '20px',
                        fontSize: '0.9em'
                    }}>
                        © {currentYear} Lin QingYing
                    </div>
                </div>

                {/* 项目介绍 */}
                <div className="section"
                     style={{marginBottom: '40px', paddingBottom: '20px', borderBottom: '1px solid #eee'}}>
                    <Title level={3} style={{
                        color: '#3498db',
                        marginTop: '20px',
                        fontSize: '1.6em',
                        borderLeft: '4px solid #3498db',
                        paddingLeft: '15px'
                    }}>
                        <BookOutlined style={{marginRight: '10px'}}/>
                        项目介绍
                    </Title>

                    <Paragraph style={{fontSize: '16px', lineHeight: '1.8'}}>
                        CangJie Telemetry 是一个为 IntelliJ
                        平台插件开发者设计的遥测数据收集和分析系统。它提供了一套完整的解决方案，帮助开发者了解用户如何使用他们的插件，从而做出更好的开发决策。
                    </Paragraph>

                    <Paragraph style={{fontSize: '16px', lineHeight: '1.8'}}>
                        系统由两部分组成：
                    </Paragraph>

                    <ul style={{marginBottom: '25px', paddingLeft: '25px', fontSize: '16px', lineHeight: '1.8'}}>
                        <li style={{marginBottom: '12px'}}>
                            <Text strong>Intellij-CangJie 插件</Text>：集成到您的 IntelliJ 插件中，负责收集遥测数据并安全传输
                        </li>
                        <li style={{marginBottom: '12px'}}>
                            <Text strong>Telemetry Admin 管理后台</Text>：提供数据存储、分析和可视化功能，帮助开发者洞察用户行为
                        </li>
                    </ul>

                    <div style={{
                        backgroundColor: '#fffde7',
                        padding: '15px',
                        borderLeft: '4px solid #ffd600',
                        margin: '20px 0',
                        borderRadius: '4px'
                    }}>
                        <Paragraph style={{margin: 0}}>
                            CangJie Telemetry 是我的个人项目，秉承"尊重用户隐私"的原则，所有数据收集均需用户明确授权，且仅收集必要的匿名使用数据，不涉及任何个人身份信息。
                        </Paragraph>
                    </div>
                </div>

                {/* 团队介绍 */}
                <div className="section"
                     style={{marginBottom: '40px', paddingBottom: '20px', borderBottom: '1px solid #eee'}}>
                    <Title level={3} style={{
                        color: '#3498db',
                        marginTop: '40px',
                        fontSize: '1.6em',
                        borderLeft: '4px solid #3498db',
                        paddingLeft: '15px'
                    }}>
                        <TeamOutlined style={{marginRight: '10px'}}/>
                        团队介绍
                    </Title>

                    <Row gutter={[24, 24]} style={{marginTop: '30px'}}>
                        {teamMembers.map((member, index) => (
                            <Col xs={24} sm={12} key={index}>
                                <Card
                                    hoverable
                                    style={{
                                        borderRadius: '8px',
                                        height: '100%',
                                        transition: 'all 0.3s'
                                    }}
                                >
                                    <div style={{display: 'flex', alignItems: 'center'}}>
                                        <Avatar size={64} src={member.avatar}/>
                                        <div style={{marginLeft: '20px'}}>
                                            <Title level={4} style={{margin: '0 0 5px 0'}}>{member.name}</Title>
                                            <Text type="secondary">{member.role}</Text>
                                        </div>
                                    </div>
                                    <Divider style={{margin: '15px 0'}}/>
                                    <Space>
                                        <Button
                                            type="text"
                                            icon={<GithubOutlined/>}
                                            href={member.github}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >
                                            GitHub
                                        </Button>
                                        <Button
                                            type="text"
                                            icon={<MailOutlined/>}
                                            href={`mailto:${member.email}`}
                                        >
                                            Email
                                        </Button>
                                    </Space>
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </div>

                {/* 技术栈 */}
                <div className="section"
                     style={{marginBottom: '40px', paddingBottom: '20px', borderBottom: '1px solid #eee'}}>
                    <Title level={3} style={{
                        color: '#3498db',
                        marginTop: '40px',
                        fontSize: '1.6em',
                        borderLeft: '4px solid #3498db',
                        paddingLeft: '15px'
                    }}>
                        <CodeOutlined style={{marginRight: '10px'}}/>
                        技术栈
                    </Title>

                    <div style={{marginTop: '25px'}}>
                        <div style={{marginBottom: '15px'}}>
                            <Text strong style={{marginRight: '10px', fontSize: '16px'}}>前端技术:</Text>
                            {techStack.filter(tech => tech.category === '前端').map((tech, index) => (
                                <Tag color={tech.color} key={index}
                                     style={{margin: '5px', fontSize: '14px', padding: '4px 8px'}}>
                                    {tech.name}
                                </Tag>
                            ))}
                        </div>

                        <div style={{marginBottom: '15px'}}>
                            <Text strong style={{marginRight: '10px', fontSize: '16px'}}>后端技术:</Text>
                            {techStack.filter(tech => tech.category === '后端').map((tech, index) => (
                                <Tag color={tech.color} key={index}
                                     style={{margin: '5px', fontSize: '14px', padding: '4px 8px'}}>
                                    {tech.name}
                                </Tag>
                            ))}
                        </div>

                        <div style={{marginBottom: '15px'}}>
                            <Text strong style={{marginRight: '10px', fontSize: '16px'}}>数据存储:</Text>
                            {techStack.filter(tech => tech.category === '数据库').map((tech, index) => (
                                <Tag color={tech.color} key={index}
                                     style={{margin: '5px', fontSize: '14px', padding: '4px 8px'}}>
                                    {tech.name}
                                </Tag>
                            ))}
                        </div>

                        <div style={{marginBottom: '15px'}}>
                            <Text strong style={{marginRight: '10px', fontSize: '16px'}}>部署与其他:</Text>
                            {techStack.filter(tech => tech.category === '部署' || tech.category === '插件开发').map((tech, index) => (
                                <Tag color={tech.color} key={index}
                                     style={{margin: '5px', fontSize: '14px', padding: '4px 8px'}}>
                                    {tech.name}
                                </Tag>
                            ))}
                        </div>
                    </div>
                </div>


                {/* 联系我们 */}
                <div className="section"
                     style={{marginBottom: '40px', paddingBottom: '20px', borderBottom: '1px solid #eee'}}>
                    <Title level={3} style={{
                        color: '#3498db',
                        marginTop: '40px',
                        fontSize: '1.6em',
                        borderLeft: '4px solid #3498db',
                        paddingLeft: '15px'
                    }}>
                        <GlobalOutlined style={{marginRight: '10px'}}/>
                        联系我们
                    </Title>

                    <div style={{
                        backgroundColor: '#f5f5f5',
                        padding: '20px',
                        borderRadius: '8px',
                        margin: '20px 0'
                    }}>
                        <Paragraph>如果您对项目有任何疑问或建议，欢迎通过以下方式联系我：</Paragraph>
                        <Paragraph><Text strong>电子邮件</Text>: <a
                            href="mailto:lin17624294976@outlook.com">lin17624294976@outlook.com</a></Paragraph>
                        <Paragraph><Text strong>GitHub</Text>: <a
                            href="https://github.com/lin-qingying/intellij-cangjie" target="_blank"
                            rel="noopener noreferrer">https://github.com/lin-qingying/intellij-cangjie</a></Paragraph>

                        <Space style={{marginTop: '15px'}}>
                            <Button
                                type="primary"
                                icon={<GithubOutlined/>}
                                href="https://github.com/lin-qingying/intellij-cangjie"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                访问 GitHub
                            </Button>
                            <Button
                                icon={<MailOutlined/>}
                                href="mailto:lin17624294976@outlook.com"
                            >
                                发送邮件
                            </Button>
                        </Space>
                    </div>
                </div>

                {/* 感谢 */}
                <div className="section" style={{marginBottom: '20px'}}>
                    <div style={{
                        textAlign: 'center',
                        padding: '30px 0 10px',
                        backgroundColor: '#f9f9f9',
                        borderRadius: '8px',
                    }}>
                        <HeartOutlined style={{color: '#e74c3c', fontSize: '28px', marginBottom: '15px'}}/>
                        <Title level={4} style={{margin: '0 0 15px 0'}}>感谢您的支持与关注</Title>
                        <Paragraph style={{maxWidth: '500px', margin: '0 auto'}}>
                            CangJie 项目将持续改进，为插件开发者提供更好的遥测数据解决方案。
                        </Paragraph>
                    </div>
                </div>

                <div style={{
                    marginTop: '60px',
                    paddingTop: '20px',
                    borderTop: '1px solid #eee',
                    fontSize: '0.9em',
                    color: '#7f8c8d',
                    textAlign: 'center'
                }}>
                    <p>© {currentYear} CangJie Telemetry 个人项目. 保留所有权利。</p>
                </div>
            </Card>
        </div>
    );
};

export default About; 